<template>
  <view class="student-stage over">
    <view class="box">
      <view class="t">学历总体规划</view>
      <view class="des mt10">方式电风扇水电费是的方式</view>
    </view>
    <view class="tip">国平</view>
    <view class="box">
      <view class="t">语文</view>
      <view class="table">
        <v-table
          :columns="columns"
          :th-td-height="28"
          :td-height="28"
          :height="(tableData.length + 1) * 30"
          :list="tableData"
          :row-class-name="rowClassNameFn"></v-table>
      </view>
      <view class="flex-between mb22">
        <view class="t1">达成度</view>
        <view class="des">100%</view>
      </view>
      <view class="t1">反思与改进</view>
      <view class="des mt10">大大大实打实大师大师大</view>
    </view>
    <view class="box">
      <view class="table-wrap flex-between">
        <view class="table-wrap-header w128 br">
          <view class="">序号</view>
          <view class="">1</view>
        </view>
        <view class="table-wrap-header w206 br">
          <view class="">年月日</view>
          <view class="">1</view>
        </view>
        <view class="table-wrap-header flex1">
          <view class="">项目</view>
          <view class="">1</view>
        </view>
      </view>
      <view class="table-wrap flex">
        <view class="table-wrap-header flex1 br">
          <view class="">类型</view>
          <view class="">1</view>
        </view>
        <view class="table-wrap-header flex1 br">
          <view class="">级别</view>
          <view class="">1</view>
        </view>
        <view class="table-wrap-header flex1">
          <view class="">次第</view>
          <view class="">1</view>
        </view>
      </view>
      <view class="table-wrap flex">
        <view class="table-wrap-header flex1 br">
          <view class="">颁发证书单位</view>
          <view class="">1</view>
        </view>
        <view class="table-wrap-header w128">
          <view class="">积分</view>
          <view class="">1</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import vTable from "@/components/no-bad-table/table.vue";
export default {
  components: {
    vTable,
  },
  data() {
    return {
      tableData: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          id: "成绩",
        },
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          id: "js",
        },
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          id: "xqs",
        },
      ],
      columns: [
        {
          title: "",
          key: "id",
        },
        {
          title: "学科目标",
          key: "name",
        },
        {
          title: "成绩",
          key: "age",
        },
      ],
    };
  },
  methods: {
    rowClassNameFn(row, index) {
      if (index % 2 !== 0) {
        return "row-bg";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.student-stage {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 24upx 32upx;
  background: #f6f6f6;
  /deep/ .div-table-body checkbox-group > view:nth-child(even),
  /deep/ .thead {
    background: #f6f6f6;
  }
  /deep/.div-table .td .td_wrap {
    line-height: normal !important;
  }
  .tip {
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
    margin-bottom: 18upx;
  }
  .box {
    padding: 32upx 24upx;
    background: #ffffff;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    margin-bottom: 24upx;
    .t {
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
    }
    .t1 {
      font-weight: bold;
      font-size: 24rpx;
      color: #000000;
    }
    .des {
      font-weight: 400;
      font-size: 24rpx;
      color: #000000;
    }
    .mt10 {
      margin-top: 10upx;
    }
    .mb22 {
      margin-bottom: 22upx;
    }
    .table {
      padding: 26upx 0;
    }
    .table-wrap {
      &-header {
        & > view {
          width: 100%;
          font-weight: 400;
          font-size: 24rpx;
          color: #000000;
          height: 56upx;
          line-height: 56upx;
          text-align: center;
        }
        & > view:nth-of-type(1) {
          background: #f6f6f6;
          font-weight: bold;
          font-size: 24rpx;
          color: #000000;
        }
      }
      .w128 {
        width: 128upx;
      }
      .w206 {
        width: 206upx;
      }
      .br {
        border-right: 2upx solid #eeeeee;
      }
    }
  }
}
</style>
